<template>
	<div class="header">
		<div class="header-left">
			<span class='iconfont'>
				&#xe624;
			</span>
		</div>
		<div class="header-search">
			<span class='iconfont'>
				&#xe632;
			</span>
			输入城市/景点/游玩主题
		</div>
		<div class="header-right" @click="toCity">
		<!--	<router-link to='/city'>
				北京<span class='iconfont'>&#xe6aa;</span>
			</router-link>-->

			北京<span class='iconfont'>&#xe6aa;</span>
		</div>
	</div>
</template>
<script >
    export default {
		methods:{
		    toCity:function(){
		        this.$router.push("/city")
			}
		}
	}
</script>
<style scoped lang='stylus'>
	/* @import '../../../assets/css/var.style' */
	@import '~css/var.style';
	.header{
		width:100%;
		height:0.88rem;
		line-height:0.88rem;
		background: $bgcolor;
		color:#fff;
		font-size:0.36rem;
		display:flex;
	}
	.header-left{
		width:.4rem;
		padding:0 0.2rem;
		text-align:center;
		font-weight:bold;
	}
	.header-search{
		-webkit-flex:1;
		-ms-flex:1;
		flex:1;
		background:#fff;
		height:.6rem; 
		margin:0.14rem 0;
		border-radius:.1rem;
		color:#e4e7ea;
		line-height:.6rem;
		font-size:0.28rem;
		padding-left:.2rem;
	}
	.header-right{
		font-size:.28rem;
		padding: 0 .2rem;
	}
	.header-right a{
		color:#fff;
	}
</style>